<template>
  <div class="page-wrapper">
    <c-card title="月报信息" class="user-list">
      <!-- <div class="search-row">
        <div>
          <div class="item">
            <label>时间</label>
            <el-select v-model="dateSelect" size="small" @change="_getList"></el-select>
          </div>
          <c-search
            v-model="searchText"
            :width="200"
            placeholder="输入关键字"
            class="item"
            @submit="_getList"
          />
        </div>
      </div>-->
      <el-table ref="table" v-loading="loading" :data="list" stripe style="width: 100%">
        <el-table-column prop="rptName" label="名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" label="月份" show-overflow-tooltip>
          <template v-slot="{row}">{{ row.year + '-' + row.month }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <!-- <el-button type="text" @click="download(row)">下载</el-button> -->
            <a :href="row.url + '?access_token=' + token" :download="row.filename">下载</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page.sync="page.index"
          :total="page.total"
          @current-change="_getList"
        ></el-pagination>
      </div>
    </c-card>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import { calcPageNum } from "@/utils";
import { getMonthly } from "@/api/data";
export default {
  name: "DataMonthly",
  components: {
    CCard
  },
  data() {
    return {
      loading: false,
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      dateSelect: null,
      searchName: "",
      list: null
    };
  },
  computed: {
    comList() {
      return this.$store.getters.comList;
    },
    comId() {
      return this.$store.getters.comId;
    },
    token() {
      return this.$store.getters.token;
    }
  },
  watch: {
    "page.index"(v) {
      const path = this.$route.path;
      this.$router.push(path + "?page=" + v);
    }
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);

    const page = parseInt(this.$route.query.page || 1);
    this.$set(this.page, "index", page);
    this.loading = true;
    this._getList().then(() => {
      this.loading = false;
    });
  },
  methods: {
    async _getList() {
      const params = {
        clientId: this.comId,
        pageNo: this.page.index,
        pageSize: this.page.size
      };
      try {
        const data = await getMonthly(params);
        this.$set(this.page, "total", data.total);
        this.list = data.rows;
      } catch (e) {
        this.$message.error(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main-container {
  height: 100%;
}
.options {
  display: flex;
  .item {
    margin-left: 20px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
}
.el-form {
  width: 700px;
}
</style>
